<cfparam name="Product_ID" type="integer" default="0" />
<cfparam name="returnUI" type="string" default="products" />
<cfscript>
	ui = "product";
	view = "form";
	obj = "product";
	product = request.productGateway.get(Product_ID = Product_ID);
</cfscript>

<cfif IsNumeric(product.getProduct_ID())>

	<cfscript>
		productCategories = request.productCategoryGateway.query();
		//productFiles = request.base.getProductFiles(productIDs = Product_ID);
		//productImages = request.base.getProductImages(productIDs = Product_ID);
		if (product.getProduct_ID() eq 0) {
			product.setDownload_Only(0);
			product.setInventory(0);
			product.setPackage(0);
		}
	</cfscript>
	
	<script type="text/javascript" language="javascript">
	<!--
		var validatorConfig = {
			debug: false,
			rules: {
				Active: {required: true},
				Product_Category_ID: {required: true},
				Product: {required: true},
				Download_Only: {required: true},
				Stock: {required: {depends: function(elements) {return $("#Inventory").val()}, digits: true, min: 0}},
				Stock_Warn: {required: {depends: function(elements) {return $("#Inventory").val()}, digits: true, min: 0}},
				Allow_Back_Order: {required: {depends: function(elements) {return $("#Inventory").val()}}},
				Package: {required: true},
				Package_Only: {required: {depends: function(elements) {return $("#Package").val()}}},
				Package_Quantity: {required: {depends: function(elements) {return $("#Package").val()}, digits: true, min: 2}},
			},
			messages: {
				Active: "Required",
				Product_Category_ID: "Required",
				Product: "Required",
				Download_Only: "Required",
				Stock: {required: "Required", digits: "Invalid", min: "Minumum 0"},
				Stock_Warn: {required: "Required", digits: "Invalid", min: "Minumum 0"},
				Allow_Back_Order: "Required",
				Package: "Required",
				Package_Only: "Required",
				Package_Quantity: {required: "Required", digits: "Invalid", min: "Minumum 2"}
			},
			focusCleanup: false,
			errorPlacement: function(error, element) {
				$(element).prev("label").children("span").remove();
				error.appendTo(element.prev("label"));
			},
			errorElement: "span",
			errorClass: "label label-danger",
			validClass: "label label-info",
			highlight: function(element, errorClass, validClass) {
				$(element).prev("label").children("span").removeClass(validClass).addClass(errorClass);
			},
			unhighlight: function(element, errorClass, validClass) {
				$(element).prev("label").children("span").removeClass(errorClass).addClass(validClass);
			}
		}
		var refreshUI = function() {
			var downloadOnly = $("#Download_Only").val();
			var inventory = $("#Inventory").val();
			var package = $("#Package").val();
			var limit = $("#Limit").val();
			if (downloadOnly == 1) {
				$("#inventoryContainer").hide();
				$("#stockContainer").hide();
				$("#stockWarnContainer").hide();
				$("#allowBackOrderContainer").hide();
				$("#packageContainer").hide();
				$("#packageOnlyContainer").hide();
				$("#packageQuantityContainer").hide();
				$("#limitContainer").hide();
				$("#maxLimitContainer").hide();
				$("#minLimitContainer").hide();
				$("#inventoryOffContainer").show();
				$("#packageOffContainer").show();
				$("#limitOffContainer").show();
			} else if (downloadOnly == 0) {
				$("#inventoryContainer").show();
				$("#packageContainer").show();
				if (inventory == 1) {
					$("#stockContainer").show();
					$("#stockWarnContainer").show();
					$("#allowBackOrderContainer").show();
				} else if (inventory == 0) {
					$("#stockContainer").hide();
					$("#stockWarnContainer").hide();
					$("#allowBackOrderContainer").hide();
				}
				if (package == 1) {
					$("#packageOnlyContainer").show();
					$("#packageQuantityContainer").show();
				} else if (package == 0 ) {
					$("#packageOnlyContainer").hide();
					$("#packageQuantityContainer").hide();
				}
				if (limit == 1) {
					$("#maxLimitContainer").show();
					$("#minLimitContainer").show();
				} else if (limit == 0 ) {
					$("#maxLimitContainer").hide();
					$("#minLimitContainer").hide();
				}
				$("#inventoryOffContainer").hide();
				$("#packageOffContainer").hide();
				$("#limitOffContainer").hide();
			}
		}
		<!--- /*var selectNewFile = function() {
			$("#New_File").trigger("click");
		}
		var newFileSelected = function() {
			var fileConfig = {};
			var filePath = $("#New_File").val();
			var filePathArray = filePath.split("\\");
			var selectedFile = filePathArray[filePathArray.length - 1];
			var selectedFileArray = selectedFile.split(".");
			var selectedFileExt = selectedFileArray[selectedFileArray.length - 1];
			fileConfig.filePath = filePath;
			fileConfig.filePathArray = filePathArray;
			fileConfig.selectedFile = selectedFile;
			fileConfig.selectedFileArray = selectedFileArray;
			fileConfig.selectedFileExt = selectedFileExt;
			// upload file
			console.log(fileConfig);
			console.log($("form#fileUploader"));
		}
		var selectNewImage = function(no) {
			$("#New_Image").trigger("click");
		}
		var startFileUpload = function() {
			$("#fileUploadForm").submit();
		}
		var newImageSelected = function(no) {
			var imageConfig = {};
			var imagePath = $("#New_Image").val();
			var imagePathArray = imagePath.split("\\");
			var selectedImage = imagePathArray[imagePathArray.length - 1];
			var selectedImageArray = selectedImage.split(".");
			var selectedImageExt = imagePathArray[imagePathArray.length - 1];
			imageConfig.imagePath = imagePath;
			imageConfig.imagePathArray = imagePathArray;
			imageConfig.selectedImage = selectedImage;
			imageConfig.selectedImageArray = selectedImageArray;
			imageConfig.selectedImageExt = selectedImageExt;
			// upload image
			
			console.log(imageConfig);
			console.log($("form#fileUploader"));
		}*/ --->
		$(function(){
			$("#productForm").validate(validatorConfig);
			refreshUI();
		})
	//-->
	</script>
	
	<style type="text/css">
		.thumbContainer {width: 100px; text-align: center; display: inline-block; vertical-align: top;}
		.xsBtnContainer {margin-top: 8px;}
	</style>
	
	<cfform id="productForm" name="productForm" action="#script_name#" role="form" method="post">
		<cfoutput>
			<input type="hidden" name="action" value="saveProduct" />
			<input type="hidden" name="ui" value="products" />
			<input type="hidden" name="Product_ID" value="#product.getProduct_ID()#" />
			<div class="row">
				<div class="col-lg-4">
					<div class="form-group">
						<label for="Active">Status<span class="label label-info">Required</span></label>
						<select id="Active" name="Active" class="form-control" required>
							<option value="1"<cfif product.getActive() eq 1> selected</cfif>>Active</option>
							<option value="0"<cfif product.getActive() eq 0> selected</cfif>>Inactive</option>
						</select>
					</div>
					<div class="form-group">
						<label for="Product_Categtory_ID">Category<span class="label label-info">Required</span></label>
						<select id="Product_Category_ID" name="Product_Category_ID" class="form-control" required>
							<option value="">Select...</option>
							<cfloop query="productCategories">
								<option value="#Product_Category_ID#"<cfif product.getProduct_Category_ID() eq Product_Category_ID> selected</cfif>>#Category#<cfif Len(Subcategory) gt 0> - #Subcategory#</cfif></option>
							</cfloop>
						</select>
					</div>
					<div class="form-group">
						<label for="ID">ID/Code/SKU</label>
						<input id="ID" name="ID" type="text" class="form-control" value="#product.getID()#">
					</div>
					<div class="form-group">
						<label for="Product">Name<span class="label label-info">Required</span></label>
						<input id="Product" name="Product" type="text" class="form-control" value="#product.getProduct()#" maxlength="200">
					</div>
					<div class="form-group">
						<label for="Description">Description</label>
						<textarea class="form-control" id="Description" name="Description" rows="3">#product.getDescription()#</textarea>
					</div>
				</div>
				<div class="col-lg-4">
					<div id="downloadOnlyContainer" class="form-group">
						<label for="Download_Only">Download Only<span class="label label-info">Required</span></label>
						<select id="Download_Only" name="Download_Only" class="form-control" onchange="refreshUI();">
							<option value="1"<cfif product.getDownload_Only() eq 1> selected</cfif>>Yes</option>
							<option value="0"<cfif product.getDownload_Only() eq 0> selected</cfif>>No</option>
						</select>
					</div>
					<label>Inventory Management</label>
					<div class="well">
						<div id="inventoryContainer" class="form-group">
							<label for="Inventory">Manage Inventory<span class="label label-info">Required</span></label>
							<select id="Inventory" name="Inventory" class="form-control" onchange="refreshUI();">
								<option value="1"<cfif product.getInventory() eq 1> selected</cfif>>Yes</option>
								<option value="0"<cfif product.getInventory() eq 0> selected</cfif>>No</option>
							</select>
						</div>
						<div id="stockContainer" class="form-group">
							<label for="Stock">Current Stock<span class="label label-info">Required</span></label>
							<input id="Stock" name="Stock" type="text" class="form-control" value="#product.getStock()#" required>
						</div>
						<div id="stockWarnContainer" class="form-group inventory">
							<label for="Stock_Warn">Stock Warning Level</label>
							<input id="Stock_Warn" name="Stock_Warn" type="text" class="form-control" value="#product.getStock_Warn()#" required>
						</div>
						<div id="allowBackOrderContainer" class="form-group">
							<label for="Allow_Back_Order">Allow Out Of Stock Ordering<span class="label label-info">Required</span></label>
							<select id="Allow_Back_Order" name="Allow_Back_Order" class="form-control">
								<option value="1"<cfif product.getAllow_Back_Order() eq 1> selected</cfif>>Yes</option>
								<option value="0"<cfif product.getAllow_Back_Order() eq 0> selected</cfif>>No</option>
							</select>
						</div>
						<div id="inventoryOffContainer">
							Disabled - download only
						</div>
					</div>
					<label>Package Management</label>
					<div class="well">
						<div id="packageContainer" class="form-group">
							<label for="Package">Manage Packaging<span class="label label-info">Required</span></label>
							<select id="Package" name="Package" class="form-control" onchange="refreshUI();">
								<option value="1"<cfif product.getPackage() eq 1> selected</cfif>>Yes</option>
								<option value="0"<cfif product.getPackage() eq 0> selected</cfif>>No</option>
							</select>
						</div>
						<div id="packageQuantityContainer" class="form-group">
							<label for="Package_Quantity">Package Quantity<span class="label label-info">Required</span></label>
							<input id="Package_Quantity" name="Package_Quantity" type="text" class="form-control" value="#product.getPackage_Quantity()#" required>
						</div>
						<div id="packageOnlyContainer" class="form-group">
							<label for="Package_Only">Limit Orders To Package Increments<span class="label label-info">Required</span></label>
							<select id="Package_Only" name="Package_Only" class="form-control">
								<option value="1"<cfif product.getPackage_Only() eq 1> selected</cfif>>Yes</option>
								<option value="0"<cfif product.getPackage_Only() eq 0> selected</cfif>>No</option>
							</select>
						</div>
						<div id="packageOffContainer">
							Disabled - download only
						</div>
					</div>
					<label>Minimum/Maximum Limits (not implemented)</label>
					<div class="well">
						<div id="limitContainer" class="form-group">
							<label for="Limit">Limit Order Quantity<span class="label label-info">Required</span></label>
							<select id="Limit" name="Limit" class="form-control" onchange="refreshUI();">
								<option value="1"<cfif 1 eq 1> selected</cfif>>Yes</option>
								<option value="0"<cfif 0 eq 0> selected</cfif>>No</option>
							</select>
						</div>
						<div id="minLimitContainer" class="form-group">
							<label for="Min_Limit">Minimum Quantity<span class="label label-info">Required</span></label>
							<input id="Min_Limit" name="Min_Limit" type="text" class="form-control" value="" required>
						</div>
						<div id="maxLimitContainer" class="form-group">
							<label for="Max_Limit">Maximum Quantity<span class="label label-info">Required</span></label>
							<input id="Max_Limit" name="Max_Limit" type="text" class="form-control" value="" required>
						</div>
						<div id="limitOffContainer">
							Disabled - download only
						</div>
					</div>
				</div>
				<div class="col-lg-4">
					<!--- <div class="form-group">
						<label>Files</label>
						<p class="help-text">Upload files in any format. For printable files, .pdf is the preferred format.</p>
						<div id="fileContainer" class="clearfix">
							<cfloop query="productFiles">
								<cfset sizeKb = size / 1000 />
								<!--- file --->
								<div class="well well-small well-clear thumbContainer">
									<img src="/common/images/icons/#ListLast(name, '.')#.png" /><br />
									<span style="font-size: 9px;">#Int(sizeKb)# kb/#ListLast(name, ".")#</span><br />
									<div class="clearfix xsBtnContainer">
										<a href="##" class="btn btn-default btn-xs btn-block" onclick="confirmDeleteFile('#name#'); return false;">Delete</a>
									</div>
								</div>
							</cfloop>
							<!--- new file --->
							<div id="newFileContainer" class="well well-small well-clear thumbContainer">
								<span id="newFile"><img src="holder.js?60x60/text:+/font:normal 20px" /></span><br />
								<span id="newFileDescription" style="font-size: 9px;">.pdf preferred</span><br />
								<div class="clearfix xsBtnContainer">
									<a id="newFileAddButton" href="##" class="btn btn-default btn-xs btn-block" onclick="selectNewFile(); return false;">Add</a>
									<a id="newFileRemoveButton" href="##" class="btn btn-default btn-xs btn-block" style="display: none; margin: 0;" onclick="removeNewFile(); return false;">Remove</a>
								</div>
							</div>
						</div>
					</div> --->
					<div class="clearfix">
						<label>Files</label>
						<iframe src="/assets/csac/scripts/files.cfm?Product_ID=#product.getProduct_ID()#" name="fileContainer" scrolling="Yes" frameborder="0" id="fileContainer" style="width: 100%; height: 200px;"></iframe>
					</div>
					<!--- <div class="form-group">
						<label>Images</label>
						<p class="help-text">Upload images in .png, .gif or .jpg format. All images are converted to .png. Thumbnails are automatically generated for each image.</p>
						<div id="imageContainer" class="clearfix">
							<cfloop query="productImages">
								<cfimage action="info" source="#productImages.Directory#\#productImages.Name#" structname="imageProps">
								<cfset sizeKb = size / 1000 />
								<!--- image --->
								<div class="well well-small well-clear thumbContainer">
									<cfif imageProps.width/imageProps.height gt 1>
										<!--- too wide --->
										<img src="/common/images/products/#productImages.Name#" width="60" /><br />
									<cfelse>
										<!--- too tall --->
										<img src="/common/images/products/#productImages.Name#" height="60" /><br />
									</cfif>
									<span style="font-size: 9px;">#Int(sizeKb)# kb/#ListLast(name, ".")# - #name#</span><br />
									<div class="clearfix xsBtnContainer">
										<a href="##" class="btn btn-default btn-xs btn-block" onclick="confirmDeleteFile('#name#'); return false;">Delete</a>
									</div>
								</div>
							</cfloop>
							<!--- new image --->
							<div id="newImageContainer" class="well well-small well-clear thumbContainer">
								<span id="newImage"><img src="holder.js?60x60/text:+/font:normal 20px" /></span><br />
								<span id="newImageDescription" style="font-size: 9px;">.png preferred</span><br />
								<div class="clearfix xsBtnContainer">
									<a id="newImageAddButton" href="##" class="btn btn-default btn-xs btn-block" onclick="selectNewFile(); return false;">Add</a>
									<a id="newImageRemoveButton" href="##" class="btn btn-default btn-xs btn-block" style="display: none; margin: 0;" onclick="removeNewFile(); return false;">Remove</a>
								</div>
							</div>
						</div>
					</div> --->
					<div class="clearfix">
						<label>Images</label>
						<iframe src="/assets/csac/scripts/images.cfm?Product_ID=#product.getProduct_ID()#" name="imageContainer" scrolling="Auto" frameborder="0" id="imageContainer" style="width: 100%; height: 200px;"></iframe>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<div class="well well-sm" style="width: 100%;">
						<a href="?ui=#returnUI#" class="btn btn-info">Cancel</a>
						<button type="submit" id="saveButton" name="saveButton" class="btn btn-info input">Save</button>
					</div>
				</div>
			</div>
		</cfoutput>
	</cfform>
	
	<!--- <cfform id="fileUploadForm" name="fileUploadForm" action="/assets/csac/scripts/file-uploader.cfm" target="fileUploadTarget" method="post" enctype="multipart/form-data" style="display: none;">
		<cfinput type="hidden" name="Product_ID" value="#product.getProduct_ID()#" />
		<cfinput type="file" id="New_File" name="New_File" onChange="this.form.submit()" />
	</cfform> --->
	
	<!--- <div id="newFileTemplate" style="display: none;">
		<div id="newFile|no|Container" class="well well-small well-clear thumbContainer">
			<span id="newFile|no|"><img src="holder.js?60x60/text:New file/font:normal 8px" /></span><br />
			<span id="newFile|no|Description" style="font-size: 9px;">.pdf preferred</span><br />
			<div class="clearfix">
				<a id="newFile|no|AddButton" href="##" class="btn btn-info btn-mini btn-block" onclick="selectFile('|no|'); return false;">Add</a><a id="newFile|no|RemoveButton" href="##" class="btn btn-default btn-mini btn-block" style="display: none; margin: 0;" onclick="removeFile('|no|'); return false;">Remove</a>
			</div>
			<input type="file" id="File_Name_|no|" name="File_Name_|no|" accept="application/pdf" onchange="fileSelected('|no|');" style="display: none;">
		</div>
	</div>
	<div id="newImageTemplate" style="display: none;">
		<div id="newImage|no|Container" class="well well-small well-clear thumbContainer">
			<span id="newImage|no|"><img src="holder.js?60x60/text:New image/font:normal 8px" /></span><br />
			<span id="newImage|no|Description" style="font-size: 9px;">.png preferred</span><br />
			<div class="clearfix">
				<a id="newImage|no|AddButton" href="##" class="btn btn-info btn-mini btn-block" onclick="selectImage('|no|'); return false;">Add</a><a id="newImage|no|RemoveButton" href="##" class="btn btn-default btn-mini btn-block" style="display: none; margin: 0;" onclick="removeImage('|no|'); return false;">Remove</a>
			</div>
			<input type="file" id="Image_|no|" name="Image_|no|" accept="image/png" onchange="imageSelected('|no|');" style="display: none;">
		</div>
	</div> --->

<cfelse>
	<div class="alert alert-info">Order not found</div>
</cfif>

